<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>虚拟DOM与真实DOM</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel" >
			/* 
				关于虚拟DOM目前你需要知道的：
						1.本质就是Object类型的对象（一般对象）。
						2.虚拟DOM比较“轻”，真实DOM比较“重”，虚拟DOM是react内部在用的，无需真实DOM身上那么多的属性。
						3.虚拟DOM早晚会被react转为真实DOM，呈现在页面上。
			*/
			//1.创建一个虚拟DOM
			const VDOM = <h1>Hello,React</h1>

			console.log(VDOM) //输出的是虚拟DOM，本质就是Object类型的一般对象
			const TDOM = document.getElementById('test')
			console.log(TDOM) //输出的是真实DOM
			debugger;

			//2.将虚拟DOM准备真实DOM渲染到页面
			ReactDOM.render(VDOM,document.getElementById('test'))
		</script>
		
	</body>
</html>